<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <style>
    /* внешний DIV перекрывает всё окно */
    
    #box {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 999;
    }
    /* в нём находится полупрозрачный экран, на 20px меньше */
    
    #box-inner {
      position: absolute;
      left: 20px;
      right: 20px;
      top: 20px;
      bottom: 20px;
      background: blue;
      opacity: 0.3;
      filter: alpha(opacity=30);
    }
    /* форма находится не в экране, а рядом с ним, чтобы не быть полупрозрачной */
    
    #box form {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      /* центрирование */
      
      margin: auto;
      /* центрирование */
      
      height: 120px;
      width: 300px;
      border: 1px solid black;
      padding: 5px 5px 5px 55px;
      background: url(https://js.cx/clipart/key.png) 3px 5px white no-repeat;
    }
  </style>
</head>

<body style="height:2000px">

  <p>Текст Текст Текст</p>

  <button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>

  <p>Текст Текст Текст</p>


  <div id="box">
    <div id="box-inner">
    </div>

    <form>
      Добро пожаловать!
      <table>
        <tr>
          <td>Логин</td>
          <td>
            <input>
          </td>
        </tr>
        <tr>
          <td>Пароль</td>
          <td>
            <input>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="submit" value="Войти">
          </td>
        </tr>
      </table>

    </form>

  </div>



</body>

</html>